<template>
  <div>
    <tableTep
      :tableConfig="state.tableConfig"
      :tableHeader="state.tableHeader"
      :tableHandleList="state.tableHandleList"
      :searchList="state.searchList"
      :getDataAsync="demoList"
      :searchForm="state.searchForm"
      @removeHandle="removeHandle"
      ref="tableTepRef"
    >
      <template #content>
        <el-col :span="6">
          <el-button type="primary" @click="searchHandle">搜索</el-button>
          <el-button type="primary" @click="resetHandle">重置</el-button>
        </el-col>
      </template>
    </tableTep>
    <FormTep
      :formList="state.formList"
      :formData="state.formData"
      ref="FormTepRef"
    />
  </div>
</template>
<script>
export default {
  name:'Demo'
}
</script>
<script setup>
import { reactive, ref, inject } from "vue";
import tableTep from "@/components/tableTep/index.vue";
import FormTep from "@/components/FormTep/index.vue";
const { demoList } = inject("$api"); //表格返回数据，具体格式前后端联调
let tableTepRef = ref(null);
const state = reactive({
  tableHeader: [  //表头数据
    {
      prop: "date", //对应字段
      label: "日期", //显示名称
      align: "center", //排序方式，不填默认为‘center’
      propDefineClick: function (row) { //单元格点击事件
        console.log(row);
      },
    },
    {
      prop: "name",
      label: "姓名",
      propDefine: (row) => {
        return `<span class="test">${row.name}</span>`; //单元格自定义简单样式
      },
    },
    {
      prop: "address",
      label: "备注",
    },
  ],
  tableConfig: {
    showIndex: true, //是否显示序号
    tableHeight: 400, //表格高度
    isSelection: true, //是否显示多选框
    tableSize: 1,   //默认列表大小
    defaultOptions: { //表格自定义配置，参考elelment Plus
      border: true,
    },
    handleOption: { // 操作列表头名称
      handleName: "操作", 
      width: 250,
      align: "center",
    },
  },
  tableHandleList: [
    // 具体操作
    {
      label: "移出",
      handle: "removeHandle",
      disabledRule: (row) => { //自定义是否disable
        return false;
      },
      isShow: true,
      btnAttr: {
        //操作按钮配置项 参考elelment Plus
        type: "text",
        size: "medium",
      },
    },
  ],
  formList: [
    {
      name: "TextMoudelTest", //字段名
      type: "TextMoudel", //组件表单类型
      title: "栏目标题", //lable名称
      required: false, // 是否为必填
      span: 12,   //全部撑满为24
      definProps: { //当前组件默认配置 参考elelment Plus
        //默认属性
        disabled: false,
      },
      //自定义方法
      inputHandle: (e) => {
        console.log(e);
      },
      rules: [ //配置额外的验证规则
        {
          required: true,
          message: "aaa",
          trigger: ["blur"],
        },
      ],
    },
    {
      name: "RadioGroupMoudelTest", 
      type: "RadioGroupMoudel", 
      title: "选择",
      trigger: ["change"], //触发条件
      required: true,
      span: 4,
      definProps: {
        //默认属性
        disabled: false,
      },
      options: [ //选项
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      change: (e) => {
        console.log(e);
      },
    },
    {
      name: "CheckboxMoudelTest", //字段名
      type: "CheckboxSingleMoudel", //类型
      title: "选择",
      required: true, // 必填
      span: 4,
      trigger: ["blur"],
      definProps: {
        //默认属性
        disabled: false,
      },
      options: ["消息提醒", "短信通知"],
      change: function (e) {
        console.log(state.formData);
      },
    },
    {
      name: "RateMoudelTest", //字段名
      type: "RateMoudel", //类型
      title: "评分",
      required: false, // 必填
      trigger: ["change"],
      span: 12,
      definProps: {
        //默认属性
        disabled: false,
        "allow-half": false,
      },
    },
    {
      name: "SelectMoudelTest", //字段名
      type: "SelectMoudel", //类型
      title: "选择行",
      trigger: ["change"],
      required: true, // 必填
      span: 12,
      definProps: {
        //默认属性
        disabled: false,
        multiple: true,
      },
      // 选择项
      options: [
        {
          value: 1,
          label: "企业",
          // disabled: true,
        },
        {
          value: 2,
          label: "员工",
        },
      ],
    },
    {
      name: "TimeSelectMoudelTest", //字段名
      type: "TimeSelectMoudel", //类型
      title: "选择时间",
      trigger: ["blur"],
      required: true, // 必填
      span: 12,
      definProps: {
        start: "08:30",
        step: "00:15",
        end: "18:30",
      },
    },
    {
      name: "DateTimePickerMoudelTest", //字段名
      type: "DateTimePickerMoudel", //类型
      title: "选择日期时间",
      trigger: ["change"],
      required: false, // 必填
      span: 6,
      definProps: {},
    },
    {
      name: "DateTimePickerMoudelTest2", //字段名
      type: "DateTimePickerMoudel", //类型
      title: "选择日期时间",
      trigger: ["change"],
      required: true, // 必填
      span: 12,
      definProps: {
        type: "datetimerange",
        "range-separator": "To",
        "start-placeholder": "Start date",
        "end-placeholder": "End date",
      },
    },
    {
      name: "CascaderMoudelTest", //字段名
      type: "CascaderMoudel", //类型
      title: "级联选择器",
      required: false, // 必填
      span: 12,
      definProps: {},
      options: [
        {
          value: "guide",
          label: "Guide",
          children: [
            {
              value: "disciplines",
              label: "Disciplines",
            },
          ],
        },
        {
          value: "component",
          label: "Component",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout",
                },
                {
                  value: "color",
                  label: "Color",
                },
                {
                  value: "typography",
                  label: "Typography",
                },
                {
                  value: "icon",
                  label: "Icon",
                },
                {
                  value: "button",
                  label: "Button",
                },
              ],
            },
          ],
        },
      ],
    },
  ],
  formData: { //表单字段，需与表单配置的name字段保持一致
    TextMoudelTest: "主菜单栏目",
    RadioGroupMoudelTest: 1,
    CheckboxMoudelTest: ["消息提醒"],
    RateMoudelTest: 0,
    SelectMoudelTest: null,
    TimeSelectMoudelTest: null,
    DateTimePickerMoudelTest: null,
    DateTimePickerMoudelTest2: null,
    CascaderMoudel: null,
  },
  searchList: [ //表格搜索条件，参考表单组件配置
    {
      name: "TextMoudelTest1", //字段名
      type: "TextMoudel", //类型
      title: "栏目标题",
      required: false, // 必填
      span: 6,
      definProps: {
        //默认属性
        disabled: false,
      },
      //自定义方法
      inputHandle: (e) => {
        console.log(e);
      },
      rules: [
        {
          required: true,
          message: "aaa",
          trigger: ["blur"],
        },
      ],
    },
    {
      name: "TextMoudelTest2", //字段名
      type: "TextMoudel", //类型
      title: "栏目标题",
      required: false, // 必填
      span: 6,
      definProps: {
        //默认属性
        disabled: false,
      },
      //自定义方法
      inputHandle: (e) => {
        console.log(e);
      },
      rules: [
        {
          required: true,
          message: "aaa",
          trigger: ["blur"],
        },
      ],
    },
    {
      name: "TextMoudelTest3", //字段名
      type: "TextMoudel", //类型
      title: "栏目标题",
      required: false, // 必填
      span: 6,
      definProps: {
        //默认属性
        disabled: false,
      },
      //自定义方法
      inputHandle: (e) => {
        console.log(e);
      },
      rules: [
        {
          required: true,
          message: "aaa",
          trigger: ["blur"],
        },
      ],
    },
  ],
  searchForm: {
    TextMoudelTest1: "主菜单栏目",
    TextMoudelTest2: "主菜单栏目",
    TextMoudelTest3: "主菜单栏目",
  },
});
const removeHandle = (row) => {
  console.log(row);
};
const searchHandle = () => {
  console.log(state.searchForm);
};
const resetHandle = () => {
  Object.keys(state.searchForm).forEach((v) => {
    state.searchForm[v] = null;
  });
};
</script>
<style scoped>
.test {
  color: aqua;
}
</style>
